import 'package:base_lib/common/base/base_bloc_page.dart';
import 'package:base_lib/common/widget/peach_button.dart';
import 'package:base_lib/index.dart';
import 'package:base_lib/router/index.dart';
import 'package:base_lib/style/input_style.dart';
import 'package:base_lib/theme/theme_global.dart';
import 'package:base_lib/utils/util.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:fsuper/fsuper.dart';
import './bloc.dart';

class ForgotPasswordPage
    extends BaseBlocPage<ForgotPasswordBloc, _ForgotPasswordPageState> {
  ForgotPasswordPage(Parameters parameters) : super(parameters);

  @override
  _ForgotPasswordPageState generateThemeState() {
    return _ForgotPasswordPageState();
  }
}

class _ForgotPasswordPageState extends BaseBlocPageState<ForgotPasswordBloc> {
  @override
  Widget buildChild(BuildContext context, MTheme theme) {
    return Material(
      child: Scaffold(
          appBar: AppBar(
            leading: BackButton(
              onPressed: () {
                Routers.pop(context);
              },
            ),
            title: Text("找回密码"),
            centerTitle: true,
          ),
          body: Container(
            color: Colors.white,
            height: double.infinity,
            width: double.infinity,
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 28),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "找回密码",
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.w500,
                        fontSize: 30),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 60),
                    child: Text(
                      "验证手机号",
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w400,
                          fontSize: 18),
                    ),
                  ),
                  60.vGapDp,
                  Container(
                      width: double.infinity,
                      margin: EdgeInsets.only(top: 10),
                      child: _buildPhone(theme)),
                  Container(
                      width: double.infinity, child: _buildSmsCode(theme)),
                  StreamBuilder(
                    stream: bloc.loadingStatus,
                    initialData: false,
                    builder: (context, AsyncSnapshot<bool> loading) {
                      return Padding(
                        padding: const EdgeInsets.only(top: 30.0),
                        child: peachButtonBuilder(
                          onTap: () {
                            Utils.hideSoftKeyboard(context);
                            if (!loading.data) bloc.setPhone(context);
                          },
                          text: loading.data ? "请求中..." : "下一步",
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          )),
    );
  }

  @override
  ForgotPasswordBloc generateBloc() {
    return ForgotPasswordBloc();
  }

  @override
  ignoreWindowWidget() => true;

  ///手机号输入框
  Widget _buildPhone(MTheme theme) {
    return StreamBuilder<String>(
        stream: bloc.historyPhone.stream,
        initialData: "",
        builder: (context, snapshot) {
          return Column(
            children: [
              TextField(
                keyboardType: TextInputType.phone,
                maxLength: 20,
                onChanged: (value) {
                  bloc.editPhoneChanged(value);
                },
                cursorColor: Colors.grey,
                strutStyle: StrutStyle(
                    fontSize: theme.themeFontSize.fontSizeBig, height: 1),
                style: TextStyle(
                    color: Colors.black,
                    fontSize: theme.themeFontSize.fontSizeBig),
                decoration: InputDecoration(
                  hintText: "请输入您的手机号",
                  counterText: "",
                  hintStyle: TextStyle(
                      color: theme.themeColor.themeLightGreyColor,
                      fontSize: 18),
                  border: InputBorder.none,
                ),
              ),
              Divider(
                height: 10,
                color: theme.themeColor.themeLightGreyColor,
              )
            ],
          );
        });
  }

  ///验证码输入框
  Widget _buildSmsCode(MTheme theme) {
    return Stack(children: <Widget>[
      Column(
        children: [
          TextField(
              onChanged: (value) {
                bloc.smsCodeChanged(value);
              },
              keyboardType: TextInputType.number,
              maxLength: 20,
              cursorColor: Colors.grey,
              strutStyle: StrutStyle(
                  fontSize: theme.themeFontSize.fontSizeBig, height: 1),
              style: TextStyle(
                  color: Colors.black,
                  fontSize: theme.themeFontSize.fontSizeBig),
              decoration: InputDecoration(
                hintText: "请输入您收到的验证码",
                counterText: "",
                hintStyle: TextStyle(
                    color: theme.themeColor.themeLightGreyColor, fontSize: 18),
                border: InputBorder.none,
              )),
          Divider(
            height: 10,
            color: theme.themeColor.themeLightGreyColor,
          )
        ],
      ),
      Positioned(
          right: 16,
          top: 12,
          child: StreamBuilder<int>(
              initialData: 0,
              stream: bloc.sentSmsCount.stream,
              builder: (context, snapshot) {
                return GestureDetector(
                    onTap: () async {
                      bloc.sentSms();
                    },
                    child: Text(
                      snapshot.data == 0 ? "获取验证码" : "${snapshot.data}s",
                      style: TextStyle(
                          color: snapshot.data == 0
                              ? theme.themeColor.themeColor
                              : Colors.grey,
                          fontSize: theme.themeFontSize.fontSizeNormal),
                    ));
              }))
    ]);
  }
}
